<template>
    <div> 
        <div class="header">
            <image :src="titleleftimg" class="header-left-img" @click="finish"/>
            <div class="header-center"><text class="header-text">{{inCaroutCreate?'新建急救单'+'( '+paramAdd.carNo+' )':'院内新建急救单'}}</text></div>
            <div class="header-right"><text class="header-right-text">保存</text></div>
        </div>
        <scroller>
            <div class="content">
                <div class="box" v-if="!inCaroutCreate">
                    <div class="title"><text class="box-text">来院方式:</text></div>
                    <div class="checkbox" :class="[paramAdd.comingWayCode==3?'checkbox-active':'']" @click="ISChecked('comingWayCode',3)"><text class="checkbox-text" :class="[paramAdd.comingWayCode==3?'checkbox-text-active':'']">自行来院</text></div>
                    <div class="checkbox mf-10":class="[paramAdd.comingWayCode==4?'checkbox-active':'']" @click="ISChecked('comingWayCode',4)"><text class="checkbox-text" :class="[paramAdd.comingWayCode==4?'checkbox-text-active':'']">院内发病</text></div>
                </div>
                <div class="box-max"> 
                    <div class="box-max-left">
                        <div class="box-max-left-top">
                            <div class="title"><text class="box-text">姓名:</text></div>
                            <div class="input">
                                <input type="text" class="input-text" placeholder='无名氏' v-model="paramAdd.userName"></input>
                            </div>
                        </div>
                        <div class="box-max-left-bottom">
                            <div class="title"><text class="box-text">性别:</text></div>
                            <div class="checkbox" :class="[paramAdd.gender == '0'?'checkbox-active':'']" @click="ISChecked('gender','0')">
                                <text class="checkbox-text" :class="[paramAdd.gender == '0'?'checkbox-text-active':'']">男</text>
                            </div>
                            <div class="checkbox mf-10" :class="[paramAdd.gender == '1'?'checkbox-active':'']" @click="ISChecked('gender','1')">
                                <text class="checkbox-text" :class="[paramAdd.gender == '1'?'checkbox-text-active':'']">女</text>
                            </div>
                        </div>
                    </div>                           
                    <div class="box-max-right">
                        <div class="box-max-right-box">
                            <image :src="idcardImg" class="box-max-right-box-img"/>
                            <text class="box-max-right-box-text">身份证识别</text>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="line">
                        <div class="title"><text class="box-text">年龄:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" placeholder='0' v-model="paramAdd.age"></input>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title"><text class="box-text">身份证号:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" v-model="paramAdd.idcard"></input>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="line">
                        <div class="title"><text class="box-text">电话:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" v-model="paramAdd.mobile"></input>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="box" v-if="inCaroutCreate">
                    <div class="title"><text class="box-text">呼救:</text></div>
                    <div class="checkbox" :class="[paramAdd.isHelp==1?'checkbox-active':'']" @click="ISChecked('isHelp',1)"><text class="checkbox-text" :class="[paramAdd.isHelp==1?'checkbox-text-active':'']">是</text></div>
                    <div class="checkbox mf-10":class="[paramAdd.isHelp==='0'?'checkbox-active':'']" @click="ISChecked('isHelp','0')"><text class="checkbox-text" :class="[paramAdd.isHelp==='0'?'checkbox-text-active':'']">否</text></div>
                </div>
                <div class="box" v-if="paramAdd.isHelp==1">
                    <div class="line">
                        <div class="title"><text class="box-text">呼救来源:</text></div>
                        <div class="input" @click="isHelp_code=!isHelp_code">
                            <text class="input-text">{{helpCode}}</text>                
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title"><text class="box-text">呼救时间:</text></div>
                        <div class="input">
                            <text class="input-text">{{paramAdd.callTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                </div>
                <div class="box" v-if="isHelp_code">
                    <div class="title"></div>
                    <div class="checkbox" :class="[paramAdd.helpCode==1?'checkbox-active':'']" @click="paramAdd.helpCode=1,helpCode='本区域120',isHelp_code=false"><text class="checkbox-text" :class="[paramAdd.helpCode==1?'checkbox-text-active':'']">本区域120</text></div>
                    <div class="checkbox mf-10" :class="[paramAdd.helpCode==2?'checkbox-active':'']" @click="paramAdd.helpCode=2,helpCode='区域外120',isHelp_code=false"><text class="checkbox-text" :class="[paramAdd.helpCode==2?'checkbox-text-active':'']">区域外120</text></div>
                    <div class="checkbox mf-10" :class="[paramAdd.helpCode==3?'checkbox-active':'']" @click="paramAdd.helpCode=3,helpCode='当地医疗机构',isHelp_code=false"><text class="checkbox-text" :class="[paramAdd.helpCode==3?'checkbox-text-active':'']">当地医疗机构</text></div>
                </div>
                <div class="box-textarea mt-10" v-if="paramAdd.isHelp==1">
                    <div class="line-textarea">
                        <div class="title-textarea"><text class="box-text">呼叫地址:</text></div>
                        <input class="textarea" v-model="paramAdd.address"></input>
                    </div>
                </div>
                <div class="box">
                    <div class="line">
                        <div class="title"><text class="box-text">发病日期:</text></div>
                        <div class="input" @click="getTime(paramAdd.attackTime)">
                            <text class="input-text" v-if='isNullAttackDetailTime == true'>{{paramAdd.attackTime | ATTACK_TIME_filter}}</text>
                            <text class="input-text" v-if='isNullAttackDetailTime == false'>{{paramAdd.attackTime | filterTime}}</text>
                            <image :src="imgUrl" class="img-unit"></image>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="box">
                    <div class="line">
                        <div class="title"><text class="box-text"></text></div>
                        <div class="line-bottom" :class="[isNullAttackDetailTime?'checkbox-active':'']" @click="trggierFBTime">
                            <text class="checkbox-text" :class="[isNullAttackDetailTime?'checkbox-text-active':'']">发病时间无法精确到分钟?</text>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
                <div class="box" v-if="isNullAttackDetailTime">
                    <div class="title"></div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='0点到6点'?'checkbox-active':'']" @click="paramAdd.attackZone='0点到6点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='0点到6点'?'checkbox-text-active':'']">凌晨(0点到6点)</text>
                    </div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='6到8点'?'checkbox-active':'']" @click="paramAdd.attackZone='6到8点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='6到8点'?'checkbox-text-active':'']">清晨(6到8点)</text>
                    </div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='8到12点'?'checkbox-active':'']" @click="paramAdd.attackZone='8到12点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='8到12点'?'checkbox-text-active':'']">上午(8到12点)</text>
                    </div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='12到14点'?'checkbox-active':'']" @click="paramAdd.attackZone='12到14点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='12到14点'?'checkbox-text-active':'']">中午(12到14点)</text>
                    </div>
                </div>
                <div class="box" v-if="isNullAttackDetailTime">
                    <div class="title"></div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='14到17点'?'checkbox-active':'']" @click="paramAdd.attackZone='14到17点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='14到17点'?'checkbox-text-active':'']">下午(14到17点)</text>
                    </div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='17到19点'?'checkbox-active':'']" @click="paramAdd.attackZone='17到19点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='17到19点'?'checkbox-text-active':'']">傍晚(17到19点)</text>
                    </div>
                    <div class="checkbox mf-10" :class="[paramAdd.attackZone=='19到24点'?'checkbox-active':'']" @click="paramAdd.attackZone='19到24点'">
                        <text class="checkbox-text" :class="[paramAdd.attackZone=='19到24点'?'checkbox-text-active':'']">晚上(19到24点)</text>
                    </div>
                </div>
                <div class="box-textarea mt-10">
                    <div class="line-textarea">
                        <div class="title-textarea"><text class="box-text">主诉:</text></div>
                        <input class="textarea" v-model="paramAdd.chiefComplaint"></input>
                    </div>
                </div>
                <div class="box-textarea">
                    <div class="line-textarea">
                        <div class="title-textarea"><text class="box-text">发病地址:</text></div>
                        <input class="textarea" v-model="paramAdd.attackAddress"></input>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
    import WeexNativeModule from "../../common/WeexNativeModule"
    import Resource from "../../../dist/res/Resource"
    import DateUtil from "../../common/util/DateUtil"
    import ACApi from "../../common/http/ACApi"
    const modal = weex.requireModule('modal')
    export default {
        name: 'EMNewInEMPage',
        data: function () {   
            return {
                titleleftimg:Resource.getResource("title_cha_img.png"),
                imgUrl:Resource.getResource("choose.png"),
                idcardImg:Resource.getResource("idcard_img.png"),
                isNullAttackDetailTime: false,
                inCaroutCreate: true,
                isHelp_code: false,
                helpCode: '',
                paramAdd: {
                    'comingWayCode': '',//来院方式
                    'userName': '',//姓名
                    'gender': '',  //性别
                    'age': '',//年龄
                    'idcard': '',//身份证号
                    'mobile': '',//电话                   
                    'attackTime': '',// 发病日期
                    'attackDepartment':'',//发病科室
                    'attackZone': '',//发病区间
                    'attackAddress': '', //发病地址
                    'chiefComplaint': '', //主诉
                    'carNo': 123,
                    'isHelp': '',
                    'address': '',
                    'callTime': '',
                    'helpCode': ''
                }
            }                                                     
        },
        mounted: function() {
            let _this = this
            // modal.alert({
            //     message: WeexNativeModule,
            //     duration: 0.3
            // })
        },
        filters: {
            filterTime: function(item) {
                if(item) {
                    let time = DateUtil.formatTime(item,'yyyy-MM-dd hh:mm')
                    return time
                }
            },
            ATTACK_TIME_filter: function(item) {    
                if(item) {      
                    let time = formatTime(item,'yyyy-MM-dd')
                    return time       
                }                                            
            }
        },
        methods: {
            ISChecked: function (key,value) {
                this.paramAdd[key] = this.paramAdd[key] && this.paramAdd[key] === value  ? '' : value;
            },
            trggierFBTime: function () {
                let _this = this
                _this.paramAdd.attackTime = ''
                _this.isNullAttackDetailTime = !_this.isNullAttackDetailTime
                if(!_this.isNullAttackDetailTime) {
                    _this.paramAdd.attackZone = ''
                }
            },
            finish: function() {
                WeexNativeModule.finish()
            },
            getTime: function(typeTime) {
                let _this = this
                let defaultdate
                if(!StringUtils.isEmpty(typeTime)){
                    defaultdate = DateUtil.formatTime(
                        new Date(typeTime),'yyyy-MM-dd hh:mm');
                }else {
                    defaultdate = DateUtil.formatTime(
                        new Date(),'yyyy-MM-dd hh:MM');
                }
                WeexNativeModule.selectDateTime(defaultdate,false,true,true,true,true,false,false,"","",function(time) {
//                    WeexNativeModule.alert(time)
                })
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;    
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        border-bottom-color: #f2f2f2;
    }
    .header-left {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 15px;
    }
    .header-right {
        width: 80px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;  
        border-radius: 2px;     
    }
    .header-text {
        font-size: 13px;
        color: #666;
    }
    .header-right-text {
        font-size: 13px;
        color: #FFF;
        text-align: center;
        line-height: 25px;       
    }
    .content {
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }
    .box-text {
        font-size: 12px;
        color: #666;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .title {
        width: 80px;
    }
    .input {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }
    .input-mini {        
        position: relative;
        width: 100px;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        margin-left: 10px;
    }
    .input-unit {
        position: absolute;
        color: #666;
        font-size: 12px;
        top: 4px;
        right: 8px;
    }
    .input-text {  
        color: #666;
        line-height: 22px;     
        font-size: 12px;
    }
    .checkbox {
        width: 87px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .checkbox-auto {
        width: 160px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .checkbox-text {
        font-size: 12px;
        color: #666;
    }   
    .mf-10 {
        margin-left: 10px;
    }
    .line-bottom {
        flex: 1;
        height: 25px;        
        background-color: #f2f2f2;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-active {
        background-color: #4c7fd8;
    }
    .box-text-active {
        color: #FFF;
    }
    .img-unit {
        position: absolute;                  
        top: 3px;
        right: 5px;
        width: 8px;
        height: 16px;
    }
    .box-max {
        flex: 1;
        display: flex;
        flex-direction: row;
        height: 90px;
        justify-content: space-between; 
    }
    .box-max-left {
        flex: 1;
        display: flex;
    }
    .box-max-right {
        flex: 1;
        box-sizing: border-box;
    }
    .box-max-right-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #f2f2f2;
        height: 70px;
        border-radius: 3px;
        margin-right: 70px;
        margin-top: 5px;
    }
    .box-max-right-box-img{
        width: 40px;
        height: 26px;
        margin-right: 10px;
    }
    .box-max-right-box-text{
        color:#999;
        font-size:12px;
    }
    .box-max-left-top {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .box-max-left-bottom {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .box-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;       
    }
    .line-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .title-textarea {
        width: 80px;
        padding-top: 8px;
    }
    .textarea {
        box-sizing: border-box;
        flex: 1;
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        font-size: 12px;
        height: 25px;
        padding-left: 3px;
    }
    .checkbox-active {
        background-color: #4c7fd8;
    }
    .checkbox-text-active {
        color: #FFF;
    }
    .mt-10 {
        margin-top: 10px;
    }
</style>

